// 完成产品的选项卡功能

// 获取到选项卡盒子
const product_table = document.getElementById('product_table')


// 完成点击选项卡切换属性
clickChangeAttr()
// 在选项卡盒子里面添加a标签，完善布局
appendA()

// 点击按钮添加active属性
function clickChangeAttr(){
    // 对选项卡盒子添加事件，完成事件委托
    product_table.addEventListener('click',e=>{
        const target = e.target

        // 判断点击是不是来自a标签
        if(target.tagName === 'A'){
            // 如果是，先把所有a标签的属性抹除，再为该a标签添加属性
            for(let i = 0; i < product_table.children.length; i++){
                product_table.children[i].removeAttribute('class')
            }

            target.setAttribute('class','active')
        }
    })
    
}

// 在选项卡盒子里面添加a标签，完善布局的函数
function appendA(){
    const newSpan = document.createElement('span')
    // 设置a的属性
    newSpan.style.flex = 'auto'
    // 设置
    product_table.append(newSpan)
}

